<!--复制sub-header,ng-content不能链式传递-->
<section class="content-header">
    <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <div class="d-flex align-items-center flex-wrap mr-2">
            <h1 *ngIf="!breadcrumbs || breadcrumbs.length === 0">{{title}}</h1>
            <div *ngIf="description && (!breadcrumbs || breadcrumbs.length === 0)"
                class='subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200'></div>
            <div *ngIf="description && (!breadcrumbs || breadcrumbs.length === 0)" class="d-flex align-items-center">
                <span class='text-muted font-weight-bold mr-4'>{{description}}</span>
            </div>

            <div *ngIf="false" class='subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200'></div>
            <ul *ngIf="breadcrumbs && breadcrumbs.length > 0"
                class='breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm'>
                <li class='breadcrumb-item' *ngFor="let breadcrumbItem of breadcrumbs">
                    <a *ngIf="breadcrumbItem.isLink()" style="cursor:pointer" (click)="goToBreadcrumb(breadcrumbItem)"
                        class='text-muted'>
                        {{breadcrumbItem.text}}
                    </a>
                    <span *ngIf="!breadcrumbItem.isLink()" class='text-muted'>{{breadcrumbItem.text}}</span>
                </li>
            </ul>
        </div>
        <div class="d-flex align-items-center">
            <ng-container *ngIf="!menuConfig.imageText.enable || selectedTabId =='contentTab'">
                <ng-content select="div[role=actions]"></ng-content>
            </ng-container>
            <div class="ml-1">
                <button (click)="save()" class="btn btn-primary blue  mr-1"  [buttonBusy]="saving"
                [busyText]="l('SavingWithThreeDot')" *ngIf="selectedTabId =='menuInfoTab' && menuConfig.imageText.enable && permissionDic['Pages.Tenant.MenuInfo.ImageText.Create']">
                    <i class="fa fa-save"></i>{{"Save" | localize}}
                </button>
    
                <button (click)="goSeoModal()" class="btn btn-primary blue  mr-1" *ngIf="seo && !menuConfig?.disableSeo && permissionDic['Pages_Manange_Tenant_Seo']">
                    <i class="bi bi-arrow-up-short"></i> SEO
                </button>
                <button (click)="goExtendedDataModal()" class="btn btn-primary blue  mr-1" *ngIf="permissionDic['Pages.Tenant.MenuInfo.ExtendedData'] && menuConfig.extended.enable">
                    <i class="bi bi-server"></i> 扩展数据
                </button>
                <button (click)="goConfigModal()" class="btn btn-primary blue  mr-1" *ngIf="hasConfigPermission">
                    <i class="bi bi-gear"></i> 配置
                </button>
                <button (click)="synchorization()" type="button" class="btn btn-primary blue" 
                  *ngIf="selectedTabId =='menuInfoTab' && dataSynchronous && menuConfig.imageText.enable && permissionDic['Pages.Tenant.MenuInfo.ImageText.Create']">
                   <i class="bi bi-stickies"></i>{{"ManualSynchorization" | localize}}
                </button>
            </div>
        </div>
    </div>
</section>

<section class="content d-flex flex-column flex-column-fluid" style="padding: 0.5rem 0.5rem;">
    <div [class]="containerClass">
        <div class="card card-custom gutter-b">
            <div class="card-body">
                <tabset class="tab-container" *ngIf="!blankPage && menuConfig.imageText.enable && permissionDic['Pages.Tenant.MenuInfo.ImageText']">
                    <tab class="mb-4" [heading]="getDisplayName('content')" id="contentTab" [active]="selectedTabId =='contentTab'"  (selectTab)="onTabSelect($event)">
                    </tab>
                    <tab class="mb-4" [heading]="getDisplayName('body')" id="menuInfoTab"  [active]="selectedTabId =='menuInfoTab'" (selectTab)="onTabSelect($event)">
                    </tab>
                </tabset>
                <div [hidden]="selectedTabId =='menuInfoTab'">
                    <ng-content select="div[role=content]"></ng-content>
                </div>
                <div [hidden]="selectedTabId =='contentTab'">
                    <ng-container #vc2></ng-container>
                </div>
            </div>
        </div>
    </div>

</section>

<seo-modal #seoModal></seo-modal>
<menu-extend-modal #extendedDataModal  (callback)="imageTextUpdate($event)"></menu-extend-modal>
<menu-info-config-modal #jsonEditorModal (callback)="reloadPage()"></menu-info-config-modal>